<template>
  <div class="content">
    <div class="left-box back-color " v-bind:style="{height:winHeight+'px',paddingTop:imgMarginTop-50+'px'}">
      <img src="../../static/image/inde-left.png" class="imgs" alt="" v-bind:style="{top:imgMarginTop+'px'}">
    </div>
    <div class="right-box back-color-one " v-bind:style="{height:winHeight+'px',paddingTop:imgMarginTop-50+'px'}">
      <img src="../../static/image/index-right.png" class="imgs" alt="" v-bind:style="{top:imgMarginTop+'px'}">
    </div>
  </div>
</template>
<style>

</style>

<script>

  export default{
    data(){
      return {
        msg: 'hello vue',
        winHeight: window.innerHeight,
        imgMarginTop: window.innerHeight,
      }
    },
    components: {},
    created: function () {

    },
    mounted: function () {
      let win_height = window.innerHeight;
      let img_heigh = $('.imgs').height();
      let img_margin =(win_height - img_heigh)/2;
      this.imgMarginTop = img_margin;
      window.onresize = function () {
        let win_height = window.innerHeight;
        let img_heigh = $('.imgs').height();
        let img_margin =(win_height - img_heigh)/2;
        this.imgMarginTop = img_margin;
        this.winHeight = win_height
      }.bind(this)
    }
  }
</script>
